<template>
  <div class="sop_list table-theme">
    <head-title title="公众号--上传图片"></head-title>
    <el-card>
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addForm"
        label-width="120px"
      >
        <el-form-item label="图片:" prop="file">
          <div class="headImg">
            <el-upload
              class="avatar-uploader"
              ref="upload"
              action="fakeaction"
              :show-file-list="false"
              :http-request=" function (res) { return upload(res); } "
              multipleaccept="image/*"
              :on-change="onchange"
            >
              <img
                v-if="addForm.imageUrl"
                :src="addForm.imageUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="类型:" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择等级" @change="onChange">
            <el-option
              v-for="item in typeLists"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" class="btn" @click="submit('addForm')">确 定</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      addForm: {
        file: "",
        type: "image",
        imageUrl: "",
      },
      addFormRules: {
        file: [{ required: true, message: "请上传图片" }],
        type: [{ required: true, message: "请选择类型" }],
      },
      typeLists: [
        {
          value: "image",
          label: "大图",
        },
        {
          value: "thumb",
          label: "缩略图",
        },
      ],
      isLt1MB: true,
      isLt64KB: true,
    };
  },
  methods: {
    upload(params) {
      const file = params.file,
        isJPGPNG = file.type === "image/jpeg" || "image/png";
        this.isLt1MB = file.size / 1024 <= 1024;
        this.isLt64KB = file.size / 64 <= 64;
      if (!isJPGPNG) {
        this.$message.error("只能上传图片格式png、jpg!");
        this.addForm.imageUrl = "";
        return;
      }
      if (!this.isLt1MB && this.addForm.type === 'image') {
        this.$message.error("图片不能大于1M");
        return;
      } else if (!this.isLt64KB && this.addForm.type === 'thumb') {
        this.$message.error("图片不能大于64KB");
        return;
      }
      this.formData = new FormData();
      this.formData.append("file[]", file);
      this.addForm.file = file;
    },
    onchange() {
      var event = event || window.event;
      var file = event.target.files[0];
      var reader = new FileReader();
      //转base64
      reader.onload = (e) => {
        if (this.addForm.type === "image" && this.isLt1MB) {
            this.addForm.imageUrl = e.target.result;
        } else if (this.addForm.type === "thumb" && this.isLt64KB) {
            this.addForm.imageUrl = e.target.result;
        }
      };
      reader.readAsDataURL(file);
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formData.append('type',this.addForm.type);
          this.$http(this.$ApiList.AddImageSop,this.formData).then(res=>{
              this.$message.success('上传成功');
              this.formData = '';
              this.addForm.file = '';
              this.addForm.type = 'image',
              this.addForm.imageUrl = ''
          })
        }
      });
    },
    onChange(data){
        if (data === "image" && !this.isLt1MB) {
              this.$message.error("图片不能大于1M");
              this.addForm.imageUrl = '';
              this.isLt1MB = true;
              this.isLt64KB = true;
              this.formData = ''
          } else if (data === "thumb" && !this.isLt64KB) {
              this.$message.error("图片不能大于64KB");
              this.addForm.imageUrl = '';
              this.isLt1MB = true;
              this.isLt64KB = true;
              this.formData = ''
          }
    },
    reset(){
         this.addForm.file = '';
         this.addForm.type = '';
         this.addForm.imageUrl = '';
         this.isLt1MB = true;
         this.isLt64KB = true;
         this.formData = '';
         this.$refs['addForm'].resetFields();
    }
  },
};
</script>
<style lang="scss" scoped>
.el-form{
    width: 500px;
}
.btn{
    margin-left: 40px;
    margin-right: 20px;
}
</style>